<!-- Imports Polymer -->
<link rel="import" href="../../../bower_components/polymer/polymer.html">

<!-- Imports Dependencies -->
<link rel="import" href="../../../bower_components/app-localize-behavior/app-localize-behavior.html">

<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../../bower_components/iron-icons/image-icons.html">
<link rel="import" href="../../../bower_components/chemical-element-visualisation/chemical-element-visualisation.html">

<!-- Defines element markup -->
<dom-module id="chemical-element-page">

  <template>

    <custom-style>
      <style>

        :host
        {
          font-size: 1.1vw;

          background-color: var(--background-color);
          color: var(--text-color);
        }

        paper-card
        {
          width: 100%;
          height: 100%;
          padding: 0.25vw;

          background-color: var(--background-color);
          color: var(--text-color);
        }

        .element-name
        {
          font-size: 1.5vw;
        }

        .container
        {
          display: flex;
          height: 100%;
          width: 100%;
        }

        
        .value-field
        {
           user-select: text; 
        }
        

        .item-3x
        {
          flex: 3;
          padding: 0.5vw;
        }

        .item-5x
        {
          flex: 5;
          padding: 1.5vw;
        }

        table
        {
          width: 100%;
          border-spacing: 0.1vw;
        }

        td
        {
          border-width: 0.1vw;
          width: 33%;
        }

        .blank
        {
          height: 0.5vw;
        }

        td.indexer
        {
          width: 67%;
        }

        iron-icon
        {
          --iron-icon-width: 12px;
          --iron-icon-height: 12px;
        }

        chemical-element-visualisation
        {
          --chemical-element-visualisation-background-color: var(--background-color);
        }

        .not-metal              { color: var(--non-metal-primary-color);              }
        .alkali-metal           { color: var(--alkali-metal-primary-color);           }
        .alkaline-earth-metal   { color: var(--alkaline-earth-metal-primary-color);   }
        .transition-metal       { color: var(--transition-metal-primary-color);       }
        .metalloid              { color: var(--metalloid-primary-color);              }
        .post-transition-metal  { color: var(--post-transition-metal-primary-color);  }
        .other-nonmetal         { color: var(--other-nonmetal-primary-color);         }
        .lanthanide             { color: var(--lanthanide-primary-color);             }
        .actinide               { color: var(--actinide-primary-color);               }
        .halogen                { color: var(--halogen-primary-color);                }
        .noble-gas              { color: var(--noble-gas-primary-color);              }

      </style>
    </custom-style>

      <paper-card>
        <div class="container">
          <div class="item-3x">
            <chemical-element-visualisation symbol="[[symbol]]"></chemical-element-visualisation>
          </div>
          <div class="item-5x">
            <div id="details-area">
              <table>
                <tr>
                  <td class="indexer">
                    <b class$="[[element.group]] element-name">[[localize(element.name)]]</b>
                    <!---
                    &nbsp;
                    <iron-icon id="copy-to-clipboard-icon" icon="icons:content-copy"></iron-icon>
                    -->
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td class="indexer blank"></td>
                  <td></td>
                </tr>
                <tr>
                  <td class="indexer"><b>[[localize("atomic number")]]</b></td>
                  <td><span class="value-field">[[element.atomic-number]]</span></td>
                </tr>
                <tr>
                  <td class="indexer"><b>[[localize("atomic weight")]]</b></td>
                  <td><span class="value-field">[[element.atomic-weight]]</span>&nbsp;u</td>
                </tr>
                <tr>
                  <td class="indexer"><b>[[localize("electronegativity")]]</b></td>
                  <td><span class="value-field">[[element.electronegativity]]</span></td>
                </tr>
                <tr>
                  <td class="indexer blank"></td>
                  <td></td>
                </tr>
                <tr>
                  <td class="indexer"><b>[[localize("boiling point")]]</b></td>
                  <td><span class="value-field">[[displayTemperaturIndication(element.boiling-point, temperatureIndicator)]]</span></td>
                </tr>
                <tr>
                  <td class="indexer"><b>[[localize("melting point")]]</b></td>
                  <td><span class="value-field">[[displayTemperaturIndication(element.melting-point, temperatureIndicator)]]</span></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </paper-card>

  </template>

  <!-- Loads JavaScript -->
  <script src="chemical-element-page.js"></script>
</dom-module>
